<template>
  <div id="">
    <headerbox :headerTitle="headerTitle" :hasBack='true' :addIcon="true" @addEvent="addEvent"></headerbox>
    <div class="">
      <noneList v-if="skillList.length==0"></noneList>
      <div class="" v-else v-for="skillItem in skillList" :key="skillItem.key">
        <serviceItem :skillItem="skillItem"></serviceItem>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
import {skillList} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  data: () => ({
    headerTitle:'',
    token:'',
    skillList:[],
  }),
  components: {
    serviceItem:()=>import('../myServiceItem'),
    noneList:()=>import('@/components/noneList/noneList'),
  },
  computed: {
    ...mapState({
      skillType:state=>state.myServiceStore.skillType,
    })
  },
  methods: {
    addEvent(data) {
      this.$router.push({path:'/publishService',query:{skillType:this.skillType}});
    },
    getSkillList() {
      let self = this;
      let skillParam = {
        isOwn:true,   //获取自己发布的技能列表
        skillType:self.skillType,
        token:self.token,
        currentPage:1,
      }
      skillList(skillParam).then(res=>{
        console.log(res);
        if(res) {
          self.skillList = res.data.result;
        }
      })
    },
  },
  mounted() {
    //do something after mounting vue instance
    console.log(this.skillType);
    let skillType = this.skillType;
    switch (skillType) {
      case 0:
        this.headerTitle = '我的陪练服务';
        break;
      case 1:
        this.headerTitle = '我的圈友服务';
      break;
      case 2:
        this.headerTitle = '我的教练服务';
        break;
      default:
        break;
    }
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.token = xlyd_loginInfo.token;

    this.getSkillList();
  }
}
</script>
<style lang="scss" scoped>
</style>
